<template>
  <div class="manage">
    <div class="manage-header">
      <h1>回厂</h1>
      <el-form :model="searchForm" class="searchForm">
        <el-form-item label="选择" class="searchFormSelect">
          <el-select
            v-model="searchForm.searchType"
            placeholder="请选择搜索类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in problemList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search">
          <el-input
            placeholder="请输入名称"
            v-model="searchForm.name"
          ></el-input>
          <el-button type="primary" @click="searchName">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <el-table height="90%" :data="tableData" stripe style="width: 100%">
        <el-table-column min-width="20px" prop="wid" label="仓库记录ID">
        </el-table-column>
        <el-table-column min-width="40px" prop="drugName" label="药品名">
        </el-table-column>
        <el-table-column min-width="20px" prop="wretNum" label="回厂数量">
        </el-table-column>
        <el-table-column min-width="30px" prop="retTime" label="回厂时间">
          <template slot-scope="scope">
            {{
              scope.row.retTime
                .toLocaleString()
                .replace(/T/g, " ")
                .replace(/\.[\d]{3}Z/, "")
            }}
          </template>
        </el-table-column>
        <el-table-column prop="problemType" label="问题原因">
          <template slot-scope="scope">
            <div v-for="item in problemList" :key="item.typeId">
              <p v-if="item.typeId == scope.row.problemType">
                {{ item.typeName }}
              </p>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDel(scope.row.sid)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageData.total"
        @current-change="handlePage"
        :page-size="onePageSize"
        :current-page.sync="pageData.curPage"
        class="pager"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getWarehouseRetPage } from "@/api/warehouseInfo/warehouseRetInfo";
import { getTypeList } from "@/api/warehouseInfo/drugProblemInfo";

export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        wtid: "",
        wid: "",
        wretNum: "",
        retTime: "",
        problemType: "",
      },
      formNull: {
        wtid: "",
        wid: "",
        wretNum: "",
        retTime: "",
        problemType: "",
      },
      rules: {
        splName: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
        splPhone: [
          { required: true, message: "请输入供应商电话", trigger: "blur" },
        ],
      },
      tableData: [
        {
          wtid: "",
          drugName: "",
          wid: "",
          wretNum: "",
          retTime: "",
          problemType: "",
        },
      ],
      onePageSize: 10,
      pageData: {
        total: 0, //当前总条数
        curPage: 1,
      },
      searchForm: {
        name: "",
        handleType: [],
        searchType: -1,
      },
      problemList: [{ typeId: "1", typeName: "null" }],
    };
  },
  methods: {
    getProblemList() {
      getTypeList().then(({ data }) => {
        this.problemList = data.data;
      });
    },
    getList(curPage, limit, sname = null) {
      this.getProblemList();
      if (curPage === null || limit == null) {
        curPage = 1;
        limit = this.onePageSize;
      }
      var name = "";
      var type = 0;
      //有搜索内容
      if (sname != null && sname != "") {
        type += 1;
        name = sname + ",";
      } else {
        name = " " + ",";
      }
      //搜索类型
      if (this.searchForm.searchType != -1) {
        type += 2;
        name = name + this.searchForm.searchType + ",";
      } else {
        name = name + " " + ",";
      }
      getWarehouseRetPage({
        type: type,
        curPage: curPage,
        limit: limit,
        sname: name,
      }).then(({ data }) => {
        //获取数据
        const page = data.data;
        this.tableData = page.records;
        this.pageData.total = page.total;
      });
    },
    //选择页面的回调
    handlePage(val) {
      this.getList(val, this.onePageSize);
    },
    searchName() {
      this.getList(null, null, this.searchForm.name);
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.manage {
  height: 100%;
  .manage-header {
    display: flex;
    justify-content: space-between;
    .addBtn {
      height: 70%;
    }
  }
  .common-table {
    position: relative;
    height: calc(85%);
    .pager {
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
  .searchForm {
    display: flex;
  }
  .searchFormSelect {
    width: 200px;
  }
}
</style>
